<template>
	<div class="friendList">
		<el-card class="friendUnit" shadow="hover">
			<el-button :type="openFilter ? 'info' : 'success'" size="small" icon="Aim" @click="openFilter = !openFilter"
				plain>搜索</el-button>
			<el-button type="primary" size="small" icon="CirclePlus" @click="tabUnitData.addTab('FINDFRIEND')"
				plain>找新朋友</el-button>
			<template #header>
				<el-collapse-transition>
					<div v-show="openFilter" style="height: 50px">
						<el-segmented v-model="friendData.FilterValue" :options="friendData.FilterOptions" block
							size="small" @change="Text" />
						<el-input v-model="friendData.findInput" style="max-width: 100%;" size="small"
							placeholder="搜索好友" suffix-icon="Search"></el-input>
					</div>
				</el-collapse-transition>
			</template>
		</el-card>
		<el-card v-for="item in friendData.getFriendList" @mouseenter="openUnit = item._id"
			@mouseleave="openUnit = null" class="friendUnit " shadow="hover" :key="item.friendId">
			<div class="card-header">
				<div class="card-header-div1">
					<span>
						<el-text class="mx-1" type="primary" size="small" truncated>
							{{ item.remark || item.message.nickname }}
						</el-text>
					</span>
				</div>
				<div class="card-header-div2">
					<el-tag :type="item.state == '在线' ? 'success' : 'danger'" size="small" effect="dark">{{
						item.state }}</el-tag>
				</div>
				<div class="card-header-div3">
					<el-avatar shape="square" size="10" :src="item.message.avatarPath">
						<img src="/headimg/default-1.jpeg" />
					</el-avatar>
				</div>
				<div class="card-header-div4">
					<el-text class="mx-1" type="info" size="small" truncated>
						{{ pcChatData.getLastMessages(item.friendId, item.remark || item.message.nicknameK) ||
							`签名:${item.message.bio}` }}
					</el-text>
				</div>
			</div>
			<transition name="el-fade-in-linear">
				<el-button-group class="ml-4" v-show="openUnit == item._id">
					<el-button type="primary" link @click="showMessage(item)">查看</el-button>
					<el-button type="primary" link @click="OpenChat(item)">
						聊天
					</el-button>
					<el-button type="primary" link>
						邮件
					</el-button>
				</el-button-group>
			</transition>
		</el-card>
	</div>
</template>

<script setup>

import axios from "@/axios/index.js"
import useUser from "@/store/user.js"
import useView from "@/store/view.js"
import usepcChat from "@/store/pcChat.js"
import useFriend from "@/store/friend.js"
import useTabUnit from "@/store/tabUnit.js"
import { ref } from "vue"



// 把仓库对象实例化
let userData = useUser();
let viewData = useView();
let pcChatData = usepcChat();
let friendData = useFriend();
let tabUnitData = useTabUnit();


// 当页面第一次使用时，向后端获取好友列表
friendData.renewData(axios, userData.user.friendId);

const openFilter = ref(false)
const openUnit = ref(false);

// 新增聊天单元的方法
let OpenChat = (item) => {
	let {
		remark,
		friendId,
		message
	} = item;

	// 当用户没有备注时，再使用用户自己的昵称
	let newTitle = remark || message.nickname;
	tabUnitData.addChat(newTitle, friendId);
}



// 当点击按钮时，查看用户的信息
let showMessage = (item) => {
	// 解构处理数据
	const {
		message: {
			nickname,
			username,
			avatarPath,
			bio
		},
		remark,
		addTime,
		friendId,
	} = item;
	let showFriend = {};
	showFriend.friendId = friendId;
	showFriend.nickname = nickname;
	showFriend.username = username;
	showFriend.avatarPath = avatarPath;
	showFriend.bio = bio;
	showFriend.remark = remark;
	showFriend.addTime = addTime;
	viewData.updateshowData(true, showFriend);
}
</script>

<style>
.friendUnit {
	width: 90%;
	margin: 10px auto;
}

.friendUnit>div {
	padding: 5px;
}

.friendList {
	overflow: auto;
	width: 100%;
	height: 500px;
}

.card-header {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
}

.card-header-div1 {
	grid-area: 1 / 1 / 2 / 8;
}

.card-header-div2 {
	grid-area: 1 / 8 / 2 / 11;
}

.card-header-div3 {
	grid-area: 2 / 1 / 4 / 4;
}

.el-tag {
	margin-top: -10px;
}

.card-header-div4 {
	grid-area: 2 / 4 / 4 / 11;
	padding: 5px;
	border-radius: 5px;
	border: 1px solid rgba(111, 111, 111, 0.2)
}



.item {
	margin-top: 10px;
}
</style>